
@primaryColor: #2080f0;
@borderColor: #374151;

.o-tabs {
  .tabs-nav {
    height: 40px;
    .tabs-scroll {
    }
    .tabs-tab {
    @apply transition-all duration-300;
    }
    .tabs-prev, .tabs-next {
      @apply block text-center cursor-pointer;
      width: 30px;
      height: 30px;
      line-height: 30px;
      transition: all .3s;
      &.disabled {
        @apply cursor-not-allowed;
        color: #999;
      }
    }
    .tabs-prev {
      @apply rotate-90;
    }
    .tabs-next {
      @apply -rotate-90;
    }
    .tabs-item {
      line-height: 40px;
      z-index: 2;
      &:after {
      @apply transition-all duration-300;
      }
      /*选中*/
      &.active {
        border-bottom-width: 2px;
        border-bottom-color: @primaryColor;
        color: @primaryColor;
        &:after {
          opacity: 1;
          @apply w-full;
        }
      }
      /*禁用*/
      &.disabled {
        cursor: not-allowed;
        opacity: .5
      }
    }
  }
  &.bottom {
    .tabs-nav {
      order: 1
    }
  }
  &.left, &.right {
    @apply flex-row;
    .tabs-nav {
      @apply w-full block text-center h-auto;
    }
    .tabs-scroll {
      @apply block overflow-x-hidden overflow-y-auto;
    }
    .tabs-tab {
      @apply block;
    }
    .tabs-content {
      flex: 2
    }
  }
  &.right {
    .tabs-nav {
      order: 1
    }
  }
}